<template>
  <div class="wrap">
    <div class="head">
      <!-- <img src="/static/challenge/dayChallenge.png" alt=""> -->
    </div>
    <div class="rank-list">
      <div class="r-head">
        <div class="world-tag">世界排行</div>
      </div>
      <div class="rank-box">
        <div class="rank-item" v-for="(item,index) in list" :key="index">
          <div class="rank-num" :class="{self:false}">{{index+1}}</div>
          <img v-if="item.headImgUrl" :src="item.headImgUrl" alt="">
          <img v-else src="/static/default-head.png" alt="">
          <div class="name">{{item.nickname}}</div>
          <div class="card">
            <div class="card-num">{{item.paragraphName}}</div>
          </div>
        </div>
      </div>
      <!-- 自我信息 -->
      <div class="rank-item my">
        <div class="rank-num">{{myInfo.index}}</div>
        <img v-if="myInfo.headImgUrl" :src="myInfo.headImgUrl" alt="">
        <img v-else src="/static/default-head.png" alt="">
        <div class="name">{{myInfo.nickname}}</div>
        <div class="card">
          <div v-if="myInfo.cardNumber>1000" class="card-num">-</div>
          <div v-else class="card-num">{{myInfo.paragraphName}}</div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>

</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      list: [],
      myInfo: {},
      isDayChallenge: 0,
      gold: 0
    };
  },
  computed: {
    ...mapState(["appInfo"])
  },
  methods: {
    ...mapMutations(["setAppInfoByItem"]),
    getList() {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      this.fly.post("/getRankList").then(res => {
        console.log(res);
        this.list = res.data.Result;
        this.myInfo = res.data.Result2;
        this.isDayChallenge = res.data.Result2.isDayFinish;
        this.gold = res.data.Result2.goldCoin;
        wx.hideLoading();
      });
    },
    start() {
      if (this.isDayChallenge == 1) {
        wx.showToast({
          title: "挑战次数已用光",
          icon: "none"
        });
      } else {
        debugger
        if (this.goldCoin < 10) {
          wx.showToast({
            title: "金币不足",
            icon: "none"
          });
        }else{
          this.fly.post('dayChallenge/updateGoldCoin',{
            number:-10
          }).then(res=>{
            this.setAppInfoByItem({money:this.gold-10});
            this.$router.push("/pages/dayChallenge/index");
          })
        }
      }
    }
  },
  onShow() {
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  background: #f0f0ef;
}
.head {
  width: 100%;
  height: 297rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("");
  img {
    width: 286rpx;
    height: 70rpx;
    display: block;
    margin: 86rpx auto 0 auto;
  }
}
.footer {
  width: 100%;
  height: 165rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("");
}

.rank-list {
  width: 616rpx;
  height: 800rpx;
  padding: 0 30rpx;
  background: #fff;
  border-radius: 10rpx;
  box-sizing: border-box;
  position: fixed;
  top: 130rpx;
  left: 50%;
  transform: translate(-50%, 0);
}
.r-head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24rpx;
  height: 95rpx;
  box-sizing: border-box;
  font-size: 36rpx;
}
.update-time {
  color: #aaa;
}
.world-tag {
  font-weight: bold;
  color: #7f8080;
}
.rank-box {
  width: 100%;
  height: 480rpx;
  overflow: scroll;
  margin-bottom: 48rpx;
}
.rank-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  line-height: 96rpx;
  font-size: 30rpx;
  color: #67c29f;
  height: 96rpx;
  background: #f0efef;
  img {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    margin-right: 24rpx;
  }
  // 前三
  &:nth-of-type(1),
  &:nth-of-type(2),
  &:nth-of-type(3) {
    .rank-num {
      color: #f5af4b;
    }
  }
  .rank-num {
    width: 66rpx;
    font-size: 36rpx;
    color: #aaaaaa;
    text-align: center;
    font-weight: bold;
  }
  .name {
    width: 4em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .card {
    font-size: 36rpx;
    color: #aaaaaa;
    justify-content: flex-end;
    padding-right: 24rpx;
    box-sizing: border-box;
    display: flex;
    flex-grow: 1;
    &:nth-of-type(1),
    &:nth-of-type(2),
    &:nth-of-type(3) {
      .card-num {
        color: #f5af4b;
      }
    }
    .card-num {
      font-size: 28rpx;
      color: #67c29f;
      font-weight: bold;
    }
  }
}
.self {
  background: #c5c5c5 !important;

  .name,
  .card {
    color: #fff !important;
  }
  .rank-num,
  .card-num {
    color: #f63a3a !important;
  }
}
.my {
  .rank-num {
    color: #f63a3a !important;
  }
}
.btn {
  width: 316rpx;
  height: 98rpx;
  line-height: 98rpx;
  text-align: center;
  font-size: 36rpx;
  background: #67c29f;
  border-radius: 1000rpx;
  margin: 36rpx auto 16rpx auto;
  color: #fff;
}
.gold-tip {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #aaaaaa;
  img {
    width: 32rpx;
    height: 32rpx;
    margin: 0 10rpx;
  }
  .gold {
    color: #67c29f;
  }
}
</style>
